/*
  学习目标：子传父
  // 父组件，传一个函数给子组件
  // 子组件：调用父组件传来的函数,传回数据即可
*/
import React from 'react';
// 类组件
class APP extends React.Component {
  state = {
    money: 100000,
  };
  // 老公赚钱方法
  handleMakeMoneyFn = () => {
    this.setState({ money: this.state.money + 1000 });
  };
  // 老婆花钱方法
  handleCostFn = (num) => {
    this.setState({
      money: this.state.money - num,
    });
  };
  render() {
    return (
      <div>
        <h3>家庭存款：{this.state.money}</h3>
        {/* 丈夫 */}
        <Husband
          money={this.state.money}
          handleMakeMoney={this.handleMakeMoneyFn}
        ></Husband>
        <hr />
        {/* 妻子 */}
        <Wife handleCost={this.handleCostFn}></Wife>
      </div>
    );
  }
}

// 丈夫
class Husband extends React.Component {
  render() {
    return (
      <div>
        <h3>丈夫的钱：{this.props.money}</h3>
        <button onClick={this.props.handleMakeMoney}>老公赚钱</button>
      </div>
    );
  }
}
// 妻子
class Wife extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.props.handleCost(100)}>
          老婆开始花钱了
        </button>
      </div>
    );
  }
}

export default APP;
